<template>
  <div>
    <input type="checkbox" id="formModal" ref="formModalCheckboxRef" class="modal-toggle"
           @change="formModalCheckboxChanged"/>
    <div class="modal" role="dialog">
      <div class="modal-box w-6/12 max-w-5xl modal-box-custom">
        <div class="modal-action">
          <label for="formModal"
                 class="absolute right-4 top-4 cursor-pointer">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
            </svg>
          </label>
        </div>
        <h3 class="text-lg font-bold">{{ title }}</h3>
        <div class="mt-4">
          <slot name="main"></slot>
        </div>
        <div class="modal-action">
          <slot name="footer"></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const emit = defineEmits(['dialog-modal-callback']);

const title = ref('')
const formModalCheckboxRef = ref()

function formModalCheckboxChanged(event) {
  const checked = event.target.checked
  if (checked) {
  } else {
  }
}

function showDialogModal(_title) {
  title.value = _title
  formModalCheckboxRef.value.checked = true
}

function closeDialogModal(){
  title.value = ''
  formModalCheckboxRef.value.checked = false
}


defineExpose({
  showDialogModal,
  closeDialogModal
})

</script>

<style scoped>

</style>